<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>document事件 - JavaScript</title>
</head>
<body>
    <h1>document事件</h1>
    <h4>学习目标</h4>
    <ol id="learning-target">
        <li>熟悉document常用事件</li>
        <li>了解查手册的方法</li>
    </ol>

    <script type="text/javascript">
        // --------------------------------------------------------------------
        // -- 事件（event）
        // --------------------------------------------------------------------
        /*
            HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

            使用语法:
                在标签里直接增加事件
                HTMLElement.事件类型 = 匿名函数 // 设置事件监听器
                HTMLElement.addEventListener() // 增加事件监听器
        */


        // -----------------------------
        // -- 前奏
        // -----------------------------
        // 先设计一个表单, 内容为:
        //      表单id: test-form, target为_blank, action为http://localhost:8888/user.php
        //      有姓名输入框, id为name
        //      有普通按钮, id为normal-btn
        //      有提交按钮, id为submit-btn
        //      有重置按钮, id为reset-btn
        // 做一个user.php文件, 了解一下php文件如何接收提交的参数


        // -----------------------------
        // 1. 表单事件
        // -----------------------------
        /*
            常用事件:
                onfocus 	元素获取焦点时触发
                onblur 	    元素失去焦点时触发
                onchange 	该事件在表单元素的内容改变时触发( <input>, <select>, 和 <textarea>)
                onsubmit 	表单提交时触发
                onreset 	表单重置时触发
         */
        // 1.1 获取id为name的文本框, 测试获取焦点、失去焦点和内容改变事件
        // 1.2 获取id为test-form的表单, 当表单提交时, 检测各个表单项是否都填写,
        //      都填写了就可以提交, 否则提示: 请填写表单内容
        // 1.3 获取id为test-form的表单, 当表单重置的时候,提示是否重置表单, 确认则重置, 取消则不重置



        // -----------------------------
        // 2. 鼠标事件
        // -----------------------------
        /*
             常用事件:
                 onclick 	当用户点击某个对象时调用的事件句柄
                 ondblclick 	当用户双击某个对象时调用的事件句柄
                 onmouseout 	鼠标从某元素移开
                 onmouseover 鼠标移到某元素之上
         */
        // 2.1 获取id为normal-btn的按钮, 测试鼠标单击和鼠标双击事件
        // 2.2 获取id为normal-btn的按钮, 当鼠标悬浮的时候鼠标指针切换为手型, 并且显示阴影效果
        //      阴影效果使用css3样式: box-shadow
        //      鼠标离开后, 恢复原样



        // -----------------------------
        // 3. 键盘事件
        // -----------------------------
        /*
             常用事件:
                 onkeydown 	某个键盘按键被按下
                 onkeypress 	某个键盘按键被按下并松开
                 onkeyup 	某个键盘按键被松开
         */
        // 3.1 设置一个文本框, 捕获其 onkeydown 、onkeypress 和 onkeyup 事件, 并打印出按了哪个键
        //      获取按了哪个键使用key, 而不是keyCode



        // -----------------------------
        // 4. 框架/对象事件
        // -----------------------------
        /*
            常用事件:
                onload 	一张页面或一幅图像完成加载
         */
        // 4.1 使用img标签, 载入一张图片, 在图片载入完成后, 触发onload事件
        //      图片地址: https://upload.wikimedia.org/wikipedia/commons/4/41/Apple-wireless-keyboard.jpg?download
        // 4.2 将上例的代码移动到head标签内, 运行看看效果



        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 设计一个内容管理系统的添加内容表单, 进行表单验证 相关内容如下:
        //      内容标题文本框: 限制30个字
        //      新闻分类: 有父类和子类, 下拉框选择, 参考网易新闻
        //      新闻内容: 多行文本框输入, 限制2000个字
        //      新闻封面图片: 图片上传
        //      新闻简介: 多行文本框输入, 限制100个字
        //      是否定时发布: 单选按钮, 是和否两个选项
        //      定时发布时间: 单行文本框, 时间字符串, 格式 年-月-日 小时:分钟:秒
        //      关键词: 单行文本框, 多个关键词用英文逗号分隔
        // 2. 参考: https://demo.eleadmin.com/system/user, 实现复选框多选的效果。

    </script>
</body>
</html>